<template>
	<view class="login-container">
		<!-- navbar -->
		<view class="header" :style="{ marginTop: statusBarHeight }">
			<image src="/static/images/leftarrow.png" @click="goBack" />
			<view class="title">登录</view>
		</view>

		<view class="inputbox">
			<view class="text">用户名</view>
			<input type="text" placeholder="用户名" v-model="loginStore.userinfo.username" class="username" />
		</view>
		<view class="inputbox">
			<view class="text">密码</view>
			<input type="text" placeholder="密码" v-model="loginStore.userinfo.password" class="password" />
		</view>
		<view class="login" @click="loginStore.login(loginStore.userinfo)">登录</view>
		<view class="register" @click="goRegister">没有账号?立即注册</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		useLoginStore,
		useUserStore
	} from '../../stores/store.js'

	const loginStore = useLoginStore()
	const userStore = useUserStore()

	const lastUrl = ref('')
	const statusBarHeight = ref('0px')

	onLoad((options) => {
		lastUrl.value = options.url
		const systemInfo = uni.getSystemInfoSync()
		const {
			statusBarHeight: height
		} = uni.getSystemInfoSync()
		statusBarHeight.value = `${height}px`
	})

    // 返回
	const goBack = () => {
		if (lastUrl.value === 'detail') {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: '/pages/user/user'
			})
		}
	}
	
	// 跳转注册
	const goRegister = () => {
		uni.navigateTo({
			url: '/pages/register/register'
		})
	}
	
</script>

<style lang="scss" scoped>
	.login-container {
		padding-top: px2rpx(20);

		// navbar
		.header {
			width: px2rpx(375);
			height: px2rpx(50);
			display: flex;
			align-items: center;
			border-bottom: 1px solid #ccc;

			image {
				width: px2rpx(16);
				height: px2rpx(16);
				margin: 0 px2rpx(20);
			}

			.title {
				font-size: px2rpx(14);
				margin-left: px2rpx(120);
			}
		}

		.inputbox {
			width: px2rpx(375);
			height: px2rpx(44);
			display: flex;
			align-items: center;
			margin: 0 px2rpx(20);
			font-size: px2rpx(14);
			color: #646566;
			border-bottom: 1px solid #ebedf0;

			.username {
				margin-left: px2rpx(40);
				// color: #f9f9f9;
				font-weight: 300;
				font-size: px2rpx(14);
			}

			.password {
				margin-left: px2rpx(55);
				// color: #f9f9f9;
				font-weight: 300;
				font-size: px2rpx(14);
			}
		}

		.login {
			width: px2rpx(345);
			height: px2rpx(44);
			background-color: #1989fa;
			border-radius: px2rpx(25);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			margin: px2rpx(20);
		}

		.register {
			text-align: center;
		}

	}
</style>